<template>
	<div class="order-container">
		<template>
			<el-table :data="orderData"
				border
				style="width: 100%">
				<el-table-column prop="orderDetail"
					align="center"
					label="产品图片"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="scope">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="scope.row.orderDetail[0].imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="order_id"
					align="center"
					label="订单编号"
					width="250"> </el-table-column>
				<el-table-column prop="orderDetail[0].productName"
					align="center"
					label="产品名称"
					width="180"> </el-table-column>
				<el-table-column prop="orderDetail[0].quantity"
					width="100"
					align="center"
					label="数量"> </el-table-column>
				<el-table-column prop="total_fee"
					width="100"
					align="center"
					label="总价格"> </el-table-column>
				<el-table-column prop="create_time"
					align="center"
					width="180"
					label="创建时间"> </el-table-column>
				<el-table-column prop="pay_status"
					width="100"
					align="center"
					label="支付状态">
					<template v-slot="{row}">
						{{row.pay_status===1?"已支付":"未支付"}}
					</template>
				</el-table-column>
				<el-table-column prop="order_status"
					width="100"
					align="center"
					label="订单状态">
					<template v-slot="{row}">
						<span v-if="row.order_status==0">未提交</span>
						<span v-else-if="row.order_status==1">提交成功</span>
						<span v-else-if="row.order_status==2">已经取消</span>
						<span v-else-if="row.order_status==3">无效订单</span>
						<span v-else-if="row.order_status==4">交易关闭</span>
						<span v-else-if="row.order_status==5">退货</span>
					</template>
				</el-table-column>
				<el-table-column prop="opration"
					align="center"
					label="操作">
					<template v-slot="{row}">
						<el-button type="primary"
							v-hasPay="[row.pay_status,row.order_status]"
							icon="iconfont icon-chongzhi"> 去支付 </el-button>
						<el-button type="danger"
							icon="el-icon-delete"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
	 import * as payApi from "@/api/pay";
	export default {
		meta: {
			title: "order",
			icon: "iconfont icon-dd", //存菜单对应的图标的类名
		},
		mounted() {
			payApi.getOrder().then((res) => {
				console.log(res);
				this.orderData = res.data.data
			});
		},
		directives: {
			hasPay: {
				inserted(el, binding) {
					//console.log(binding);
					//指令接收的是用户的支付状态
					//0未支付 显示去支付按钮
					//1已支付 禁用去支付按钮
					//接收到的参数是一个数组 [pay_status,order_status]
					let [pay_status, order_status] = binding.value;
					//先保存当前按钮的类名
					let className = el.className;
					//禁用按钮
					//order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
					if (pay_status !== 0 || order_status !== 1) {
						el.disabled = true; //禁用按钮
						el.className = className + " " + "is-disabled";
					}
				},
			},
		},
		data() {
			return {
				orderData: [],
			};
		},
	};
</script>

<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
</style>